<template>
  <el-container>
    <el-header style="height: auto;padding: 0px 0px;">
      <van-nav-bar
        title="称量"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </el-header>
    <el-main
      style="padding:0px 2px 0px 1px;height: calc(100vh - 106px);"
      v-model="GdData"
    >
      <el-row class="cl">
        <el-col :span="12">
          <div class="cl_1" style="border-right: 3px solid #000;">
            <p>&nbsp 称量（KG）</p>
            <textarea
              class="texta"
              type="text"
              style="font-size: 140px;"
              id="feedingQty"
            ></textarea>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="cl_1" style="border-right: 3px solid #000;">
            <p>&nbsp 累计</p>
            <textarea class="texta" type="text" v-model="acc" readonly>{{
              acc
            }}</textarea>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="cl_3" style="border-right: 3px solid #000;">
            <div class="cl_3_1" style="border-bottom: 5px solid #000;">
              <p>&nbsp 计划量</p>
              <textarea class="up" type="text" readonly>{{
                GdData.planQty
              }}</textarea>
            </div>
            <div class="cl_3_1">
              <p>&nbsp 已投量</p>
              <textarea class="up" type="text" readonly>{{
                GdData.actQty
              }}</textarea>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="cl_3">
            <div class="cl_3_1" style="border-bottom: 5px solid #000;">
              <p>&nbsp 上限</p>
              <textarea class="up" type="text" readonly>{{
                GdData.topLimit
              }}</textarea>
            </div>
            <div class="cl_3_1">
              <p>&nbsp 下限</p>
              <textarea class="up" type="text" readonly>{{
                GdData.lowerLimit
              }}</textarea>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- <div class="oneC">
        <div class="oneC_1">
          <div class="font" style="font-size: 25px;">称量</div>
          <textarea
            class="texta"
            type="text"
            style="background-color: #EEEEEE;"
            readonly
            id="feedingQty"
          ></textarea>
        </div>
        <div class="oneC_2">
          <div class="font">累计</div>
          <textarea
            class="texta"
            type="text"
            style="background-color: #EEEEEE;"
            readonly
            v-model="acc"
            >{{ acc }}</textarea
          >
        </div>
        <div
          class="texta oneC_3"
          style="width: 12.5%;height: 272px;background-color: #eeeeee;"
        >
          <div class="oneC_3_1">
            <div class="font">计划量</div>
            <textarea
              class="up"
              type="text"
              style="background-color: #EEEEEE;"
              readonly
              v-model="acc"
            ></textarea>
          </div>
          <div
            class="oneC_3_1"
            style="margin-top: 5px;border-top: 2px solid black;"
          >
            <div class="font">已投量</div>
            <textarea
              class="up"
              type="text"
              style="background-color: #EEEEEE;"
              readonly
              v-model="acc"
            ></textarea>
          </div>
        </div>
        <div class="texta oneC_3">
          <div class="oneC_3_1">
            <div class="font">上限</div>
            <textarea
              class="up"
              type="text"
              style="background-color: #EEEEEE;"
              readonly
              v-model="acc"
            ></textarea>
          </div>
          <div
            class="oneC_3_1"
            style="margin-top: 5px;border-top: 2px solid black;"
          >
            <div class="font">下限</div>
            <textarea
              class="up"
              type="text"
              style="background-color: #EEEEEE;"
              readonly
              v-model="acc"
            ></textarea>
          </div>
        </div>
      </div> -->
      <!-- <div class="twoC_1">
        <div class="font">物料条码</div>
        <textarea
          type="text"
          style="background-color: white;"
          ref="inventoryCodeInputVal"
          class="tatile_style"
          @keypress="invCodeInpuEnter"
          v-model="inventoryCode"
        ></textarea>
      </div>
      <div class="twoC_1">
        <div class="font">工单号</div>
        <textarea
          type="text"
          style="background-color: #EEEEEE;"
          ref="gcdInputVal"
          class="tatile_style"
          @keypress="gcdinpuEnter"
          v-model="gcdString"
          @focus="upco($event)"
          @blur="upco($event)"
        ></textarea>
      </div>
      <div class="twoC_1">
        <div class="font">工序号</div>
        <textarea
          type="text"
          style="background-color: #EEEEEE;"
          ref="rountNoInputVal"
          class="tatile_style"
          @keypress="rountInpuEnter"
          v-model="rountNo"
          @focus="upco($event)"
          @blur="upco($event)"
        ></textarea>
      </div> -->
      <el-row
        style="margin-bottom: 5px;margin-top: 7px; margin-right:-1px; height: 7%;"
      >
        <el-col :span="24">
          <el-input
            v-model="inventoryCode"
            ref="inventoryCodeInputVal"
            placeholder="扫描物料条码"
            @keyup.enter.native="invCode"
          ></el-input>
        </el-col>
      </el-row>
      <el-row style="height: calc(43% - 12px); margin-right:-1px;">
        <el-col :span="24">
          <el-descriptions
            title=""
            direction="vertical"
            :column="3"
            size="medium"
            border
          >
            <el-descriptions-item>
              <template slot="label">
                <span class="dzcltag">工单号</span>
              </template>
              <el-tag size="medium"
                ><span style="font-size: 20px;">{{
                  GdData.fG_Issue.no
                }}</span></el-tag
              >
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <span class="dzcltag">物料编码</span>
              </template>
              <el-tag size="medium">
                <span style="font-size: 20px;">{{
                  GdData.inventoryID
                }}</span></el-tag
              >
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <span class="dzcltag">工艺号</span>
              </template>
              <el-tag size="medium"
                ><span style="font-size: 20px;">{{
                  GdData.rountNo
                }}</span></el-tag
              >
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <span class="dzcltag">序号</span>
              </template>
              <el-tag size="medium"
                ><span>{{ GdData.noid }}</span></el-tag
              >
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <span class="dzcltag">批次号</span>
              </template>
              <el-tag size="medium"
                ><span style="font-size: 20px;">{{
                  projectBatch
                }}</span></el-tag
              >
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-main>
    <el-footer style="padding: 0px 0px;">
      <div style="display: flex ; position: absolute;width: 95%;">
        <van-button
          size="large"
          color="steelblue"
          style="margin-right: 5px; border-radius: 30px;font-size: 33px;box-shadow: 0px 5px 19px 0px darkblue ; "
          @click="acct"
          >累计</van-button
        >
        <van-button
          size="large"
          color="steelblue"
          style="margin-right: 5px; border-radius: 30px;font-size: 33px;box-shadow: 0px 5px 19px 0px darkblue; "
          @click="guiLing"
          >归零</van-button
        >
        <van-button
          size="large"
          color="steelblue"
          style="margin-right: 5px; border-radius: 30px;font-size: 33px;box-shadow: 0px 5px 19px 0px darkblue ; "
          @click="quPi"
          >去皮</van-button
        >
        <van-button
          size="large"
          color="steelblue"
          style="margin-right: 5px; border-radius: 30px;font-size: 33px;box-shadow: 0px 5px 19px 0px darkblue ; "
          @click="openYuQuPi"
          >预去皮</van-button
        >
        <van-button
          size="large"
          color="steelblue"
          style="margin-right: 5px; border-radius: 30px;font-size: 33px;box-shadow: 0px 5px 19px 0px darkblue ; "
          @click="over"
          >完成</van-button
        >
      </div>
    </el-footer>
    <div class="DZCL">
      <van-dialog
        v-model="show"
        title="预去皮"
        show-cancel-button
        @confirm="yuQuPi"
      >
        <van-field
          v-model="prePpeeling"
          label="预去皮"
          type="number"
          placeholder="请输入预去皮"
        />
      </van-dialog>
      <van-dialog v-model="qRShow" title="二维码">
        <QrCode :qrContent="ewm" />
      </van-dialog>
    </div>
  </el-container>
</template>

<script>
import { ref, onMounted, onUnmounted } from "vue";
import { Toast, Dialog } from "vant";
import router from "@/router";

import QrCode from "@/components/qrCode";

export default {
  name: "DZCL",
  components: { QrCode },
  setup() {
    const gcdString = ref(""); //工单号
    const feedingQty = ref(0); //本次配料
    const rountNo = ref(""); //工序号
    const inventoryCode = ref(""); //物料条码
    const acc = ref(0); //累计
    // const lower = ref(0);				//下限
    const inventoryID = ref("CP001"); //物料编码/物料名称
    // const ThisDemand = ref(0);		//本次需求
    // const accumulated = ref(0);			//本次累计
    const quantity = ref(0); //已投
    // const currWeight = ref(0);			//当前皮重
    const noid = ref(0); //顺序号
    const projectBatch = ref(""); //批次号
    const prePpeeling = ref(); //预去皮
    const timer = ref(null);
    const show = ref(false);
    const qRShow = ref(false);
    const ewm = ref("");
    const gcdInputVal = ref(null);
    const rountNoInputVal = ref(null);
    const inventoryCodeInputVal = ref(null);
    const GdData = ref({});
    const onClickLeft = () => {
      //history.back()
      // router.push("/");
      router.push({
        name: "Feeding",
        params: { TlStatus: null, data: GdData.value }
      });
    };

    window.readWeight = function(data) {
      feedingQty.value = parseFloat(data);
      let inputFeedingQty = document.getElementById("feedingQty");
      inputFeedingQty.value = parseFloat(data);
      if (parseFloat(data) > GdData.value.planQty + GdData.value.tolerance) {
        inputFeedingQty.value = "超了超了！";
        inputFeedingQty.style.color = "pink";
      }
      if (parseFloat(data) < GdData.value.planQty - GdData.value.tolerance) {
        inputFeedingQty.value = "低了低了！";
        inputFeedingQty.style.color = "green";
      }
      console.log(data);
      console.log("feedingQty:", feedingQty.value);
    };
    const sa = ref({
      Address: "127.0.0.1",
      Type: 300,
      Port: 9000,
      Slave: null,
      Position: null,
      ValueType: "float",
      Unit: "kg",
      Split: "<"
    });
    const upco = event => {
      switch (event.type) {
        case "focus":
          event.target.style.backgroundColor = "white";
          break;
        case "blur":
          event.target.style.backgroundColor = "#eeeeee";
          break;
        default:
          break;
      }
    };

    const gcdinpuEnter = e => {
      debugger;
      if (e.keyCode == 13) {
        if (!gcdString.value) {
          Toast.fail("工单号不能为空！");
          gcdInputVal.value.focus();
          return;
        }
        rountNoInputVal.value.focus();
      }
    };
    const invCode = e => {
      debugger;
      if (e.keyCode == 13) {
        console.log(inventoryCode.value);
        console.log(inventoryCode.value.split("-")[0]);
        console.log(router.currentRoute.params.data.inventoryID);
        if (!inventoryCode.value) {
          Toast.fail("物料条码不能为空！");
          inventoryCode.value.focus();
          return;
        } else if (
          inventoryCode.value.split("-")[0] !=
          router.currentRoute.params.data.inventoryID
        ) {
          Toast.fail("物料条码不正确！");
          inventoryCode.value.focus();
          return;
        } else {
          projectBatch.value = inventoryCode.value.split("-")[1];
          inventoryCode.value = "";
        }
      }
    };
    const rountInpuEnter = e => {
      if (e.keyCode == 13) {
        if (!rountNo.value) {
          Toast.fail("工序号不能为空！");
          rountNoInputVal.value.focus();
          return;
        }
        inventoryCodeInputVal.value.focus();
      }
    };
    const invCodeInpuEnter = e => {
      if (e.keyCode == 13) {
        if (!inventoryCode.value) {
          Toast.fail("物料条码不能为空！");
          inventoryCodeInputVal.value.focus();
          return;
        }
      }
    };
    const openYuQuPi = () => {
      show.value = true;
    };
    const yuQuPi = () => {
      Toast.success("预去皮值：" + prePpeeling.value);
    };
    const guiLing = () => {
      redData(100);
    };
    const quPi = () => {
      redData(200);
    };

    const redData = _port => {
      try {
        if (_port) {
          sa.value.Port = _port;
        } else {
          sa.value.Port = 9000;
        }

        cordova.exec(
          function(result) {
            var val = 0;
            if (sa.value.Type == "200") {
              return;
            }
            if (sa.value.Type == "") {
              val = parseFloat(result);
            } else {
              if (sa.value.ValueType.toLowerCase() == "int") {
                val = parseInt(result);
              } else {
                val = parseFloat(result);
              }
            }
            if (sa.value.Unit.toLowerCase() == "g") {
              val = val / 1000.0;
            }

            feedingQty.value = val;
          },
          function(message) {
            alert(message);
          },
          "ReadValuePlugin",
          "call",
          [
            sa.value.Address,
            sa.value.Port == null ? "0" : sa.value.Port.toString(),
            sa.value.Slave == null ? "" : sa.value.Slave.toString(),
            sa.value.Position == null ? "" : sa.value.Position.toString(),
            sa.value.ValueType,
            sa.value.Type,
            sa.value.Split
          ]
        );
      } catch (error) {
        alert(error);
      }
    };
    const over = () => {
      let inputFeedingQty = document.getElementById("feedingQty");
      console.log("称量数据", inputFeedingQty.value);
      if (!inputFeedingQty.value) {
        Toast.fail("称量数据不能为空！");
        return;
      }
      if (
        inputFeedingQty.value +
          acc.value +
          quantity.value -
          GdData.value.planQty <
          GdData.value.planQty + GdData.value.tolerance &&
        inputFeedingQty.value +
          acc.value +
          quantity.value -
          GdData.value.planQty >
          GdData.value.planQty - GdData.value.tolerance
      ) {
        console.log(GdData.value);
        let obj = {};
        obj.pid = GdData.value.pid;
        obj.rountNo = GdData.value.rountNo;
        obj.inventoryID = GdData.value.inventoryID;
        obj.inventoryDesc = GdData.value.inventoryDesc;
        obj.planQty = GdData.value.planQty;
        obj.actQty = inputFeedingQty.value;
        obj.projectBatch = projectBatch.value;
        obj.IsBomOutInv = 1;
        console.log(obj);
        DotNet.invokeMethodAsync(
          "Rmac",
          "InsertIssueChildBatch",
          JSON.stringify(obj)
        ).then(res => {
          console.log(res);
        });
        router.push({
          name: "Feeding",
          params: { TlStatus: 4, data: GdData.value }
        });
      } else {
        console.log(GdData.value);
        let obj = {};
        obj.pid = GdData.value.pid;
        obj.rountNo = GdData.value.rountNo;
        obj.inventoryID = GdData.value.inventoryID;
        obj.inventoryDesc = GdData.value.inventoryDesc;
        obj.planQty = GdData.value.planQty;
        obj.actQty = inputFeedingQty.value;
        obj.projectBatch = projectBatch.value;
        obj.IsBomOutInv = 1;
        console.log(obj);
        DotNet.invokeMethodAsync(
          "Rmac",
          "InsertIssueChildBatch",
          JSON.stringify(obj)
        ).then(res => {
          console.log(res);
        });
        router.push({
          name: "Feeding",
          params: { data: GdData.value }
        });
      }
    };
    onMounted(function() {
      console.log(router.currentRoute.params.data);
      GdData.value = router.currentRoute.params.data;

      inventoryCodeInputVal.value.focus();
      DotNet.invokeMethodAsync("Rmac", "BeginReadWeight").then(res => {
        console.log(res);
      });

      // if (process.env.NODE_ENV === "production") {
      //     timer.value = window.setInterval(() => {
      //         redData()
      //     }, 300)
      // }
    });
    onUnmounted(function() {
      //clearInterval(timer);
      //timer.value = null;
      DotNet.invokeMethodAsync("Rmac", "EndReadWeight").then(res => {
        console.log(res);
      });
    });
    const getEwmString = () => {
      const qty = feedingQty.value + acc.value;
      return (
        gcdString.value +
        ";" +
        rountNo.value +
        ";" +
        inventoryCode.value +
        ";" +
        qty +
        ";2"
      );
    };
    const yulan = () => {
      qRShow.value = true;
      ewm.value = getEwmString();
    };
    const submit = () => {
      Dialog.confirm({
        title: "提示：",
        message: "确认累计打印标签吗？"
      }).then(() => {
        try {
          ewm.value = getEwmString();
          cordova.plugins.PluginScalesPrint.printMethod(
            ewm.value,
            100,
            10,
            7,
            function(res) {
              Toast.success(res);
              gcdString.value = "";
              rountNo.value = "";
              inventoryCode.value = "";
              feedingQty.value = 0;
              acc.value = 0;
              guiLing();
            },
            function(error) {
              Dialog.alert({
                title: "error:",
                message: JSON.stringify(error)
              });
            }
          );
        } catch (error) {
          Dialog.alert({
            title: "异常信息:",
            message: JSON.stringify(error)
          });
        }
      });
    };

    const acct = () => {
      Dialog.confirm({
        title: "提示：",
        message: "确认累计数据吗？"
      }).then(() => {
        acc.value = feedingQty.value * 1 + acc.value * 1;
        guiLing();
      });
    };

    return {
      gcdString,
      feedingQty,
      rountNo,
      inventoryCode,
      // lower,
      inventoryID,
      // ThisDemand,
      // accumulated,
      // quantity,
      // currWeight,
      show,
      prePpeeling,
      redData,
      guiLing,
      quPi,
      yuQuPi,
      openYuQuPi,
      submit,
      yulan,
      qRShow,
      ewm,
      gcdinpuEnter,
      gcdInputVal,
      rountNoInputVal,
      inventoryCodeInputVal,
      rountInpuEnter,
      invCodeInpuEnter,
      acc,
      acct,
      upco,
      onClickLeft,
      noid,
      projectBatch,
      GdData,
      invCode,
      over
    };
  }
};
</script>

<style scoped>
.DZCL {
  /* padding-top: 10px; */
  margin: 0 auto;
  /* width: 1000px;
    height: 250px; */
}

.example-body {
  display: flex;
  justify-content: space-around;
  bottom: 0;
  clear: both;
}

.oneC {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}

div textarea {
  resize: none;
  /*border: 1px solid #A9A9A9;
    box-shadow: 0px 5px 19px 0px skyblue;*/
  border: none !important;
}

.twoC {
  display: flex;
  justify-content: space-between;
}

div .font {
  text-align: center;
  font-size: 20px;
  /* font-family: "Lucida Calligraphy", cursive, serif, sans-serif; */
  font-weight: bold;
  color: white;
}

.oneC .font {
  color: darkslategrey;
  text-align: left;
  padding-left: 10px;
  height: 50px;
  padding-top: 1px;
}

.oneC .oneC_1 {
  width: 50%;
  height: 272px;
  background-color: #eeeeee;
  border: 1px solid black;
}

.oneC .oneC_2 {
  width: 12.5%;
  height: 272px;
  background-color: #eeeeee;
  border: 1px solid black;
}

.oneC .oneC_3 {
  width: 25%;
  height: 272px;
  background-color: #eeeeee;
  border: 1px solid black;
}

.oneC_1 .texta {
  width: 96%;
  height: 200px;
  font-size: 100px;
  text-align: left;
  line-height: 145px;
}

.oneC_2 .texta {
  width: 85%;
  height: 200px;
  text-align: left;
  line-height: 140px;
}

.oneC_3 .oneC_3_1 {
  width: 99.5%;
  height: 130px;
}

.oneC_3 .oneC_3_1 .up {
  height: 80px;
  width: 96.5%;
  text-align: left;
  line-height: 30px;
}

.oneC textarea {
  font-size: 30px;
  text-align: left;
}

.twoC .twoC_1 {
  width: 32%;
}

.twoC .twoC_1 textarea {
  width: 90%;
  text-align: left;
  padding-left: 15px;
  padding-right: 15px;
}

.twoC {
  margin-top: 20px;
}

.threeC {
  width: 100%;
  position: absolute;
  bottom: 20px;
}

.dzcltag {
  color: black;
  font-size: 20px;
}

.cl {
  height: 50%;
  margin: 0px !important;
}

.el-col {
  height: 100%;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.cl .cl_1 {
  height: 100%;
}

.cl .cl_1 p {
  margin: 0px !important;
  width: 100%;
  height: 20%;
  line-height: 200%;
  color: #000;
  text-align: left;
  border: 1px solid #fff;
  background-color: #fff;
  font-weight: bold;
  font-size: 30px;
}

.cl .cl_1 textarea {
  resize: none;
  width: 100%;
  height: 80%;
  background-color: #fff;
  padding: 1px;
  font-weight: bold;
  font-size: 50px;
}

.cl .cl_3 {
  height: 100%;
}

.cl .cl_3 .cl_3_1 {
  height: 49.2%;
}

.cl .cl_3 .cl_3_1 p {
  margin: 0px !important;
  width: 100%;
  height: 40%;
  line-height: 200%;
  color: #000;
  text-align: left;
  border: 1px solid #fff;
  background-color: #fff;
  font-weight: bold;
  font-size: 30px;
}

.cl .cl_3 .cl_3_1 textarea {
  resize: none;
  width: 100%;
  height: 60%;
  background-color: #fff;
  padding: 1px;
  font-weight: bold;
  font-size: 50px;
}
</style>
